<template>
  <div class="user_container">
    <div class="user_header">
      <div class="block avatars">
        <el-avatar :size="100" :src="user.avatar"></el-avatar>
      </div>
      <div class="user_box">
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="user.name" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="user.realName" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="user.phone" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" style="width:250px" :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUser">更新基础信息</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>

import {getToken} from "@/utils/auth";
import {editUser, getInfo} from "@/api/user";

export default {
  data(){
    return{
      user:{},
      token:''
    }
  },
  created() {
    this.token = getToken()
    this.getInfo()
  },
  methods:{
   async getInfo() {
     const {data:res} = await getInfo(this.token)
     this.user = res.user
     console.log(res)
   },
   async editUser(){
     const res = await editUser(this.user)
     if (res.code === 200){
       this.$message({message: res.message, type: 'success'});
       this.$router.push({path:'/'})
     }else{
       this.$message.error(res.message);
     }
   }
  }
}
</script>

<style scoped>
.user_header{
  margin:50px 30%;
}
.user_box{
  margin-top: 40px;
  margin-left: 23%;
}
.avatars{
  padding-left: 42%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
